<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DeviceOrientationEvent</title>
	<!--作为iframe明, 媒体查询失效?, 不是, 而是iframe的宽高固定了-->
	<link rel="stylesheet" href="./orientation.css">
</head>
<body>
  <div>text</div>
	<button id="iframe-btn">try fullscreen iframe</button>
	<script>
	  if(window.DeviceOrientationEvent) {
		  window.addEventListener('deviceorientation', function(){
			  console.log('DeviceOrientationEvent')
			})
		}

    // 注意在不同的浏览器上下文
		if(window.top.screenfull) {
		  console.log('iframe eable fullscreen ' + document.webkitFullscreenEnabled)
			document.getElementById('iframe-btn').addEventListener('click', function(e){
			  console.log('iframe-btn click')
				window.top.screenfull.toggle(e.target)
			})

			// 没用, 这并非在自身上下文监听事件
			//window.top.screenfull.onerror(function(error) {
			//  console.log(error)
			//})

			document.addEventListener("webkitfullscreenerror", function(error){
			  console.log(error)
			})
		}
	</script>
</body>
</html>
